<template>
  <textarea
    :value="log_content"
    ref="contentDiv"
    id="contents"
    class="text-wrapper"
    style="
      min-height: 600px;
      overflow-y: auto;
      width: 100%;
      border: solid green 1px;
      margin-top: 0px;
      background-color: black;
      color: white;
    "
  >
  </textarea>
</template>

<script>
export default {
  name: "log_box",
  props: {
    parent_log_content: String,
  },

  data() {
    return {
      ws: null,
      log_content: "",
    };
  },
  watch: {
    parent_log_content() {
      this.log_content = "";
    },
  },
  created() {
    this.logQuery();
  },

  methods: {
    logClear() {
      this.log_content = "";
    },
    logQuery() {
      // if(this.ws){this.ws.close()}
      console.log("sub compent start!");
      if (!this.ws) {
        this.ws = new WebSocket("ws://127.0.0.1:8000/chat/");
      }

      this.ws.onopen = () => {
        console.log("socket连接成功");
      };
      this.ws.onmessage = (res) => {
        this.log_content = this.log_content + "\n" + res.data;
        console.log(res.data);
      };

      this.ws.onclose = (res) => {
        if (this.ws) {
          console.log(res.data());
          this.ws.close();
        }
      };
    },
  },
};
</script>

<style scoped></style>
